<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table id="table">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td><!--给删除标签绑定单击事件并且传入当前对象-->
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>

</body>
<script>
    //绑定单击事件
        document.getElementById("add").onclick=function(){
            //创建行
            let tr=document.createElement("tr");//获取行属性
            let td1=document.createElement("td");//获取name单元格
            let td2=document.createElement("td");//获取age单元格
            let td3=document.createElement("td");//获取gender单元格
            let td4=document.createElement("td");//获取删除单元格
            tr.appendChild(td1);//将单元格对象添加到行对象中
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            let name=document.getElementById("name").value;//获取name中值
            let age=document.getElementById("age").value;//获取age中值
            let gender=document.getElementById("gender").value;//获取gender中值
            let nameText=document.createTextNode(name);//创建单元格中文本
            let ageText=document.createTextNode(age);//创建单元格中文本
            let genderText=document.createTextNode(gender);//创建单元格中文本
            td1.appendChild(nameText);//将单元格文本对象添加到单元格对象中
            td2.appendChild(ageText);
            td3.appendChild(genderText);
            let a=document.createElement("a");//创建a标签元素
            let aText=document.createTextNode("删除");//创建单元格中文本
            a.setAttribute("href","JavaScript:void(0)");//给a标签添加不刷新不跳转属性和值
            a.setAttribute("onclick","drop(this)");//给a标签绑定单击事件
            a.appendChild(aText);//给a标签添加文本
            td4.appendChild(a);//将a标签添加到删除单元格位置
            let table=document.getElementById("table");//获取表格对象元素
            table.appendChild(tr);//将行添加到表格中
        }

        function drop(d){
            let table=d.parentElement.parentElement.parentElement;//通过单元格内容获取表格对象
            let tr=d.parentElement.parentElement;//通过单元格内容获取行对象
            table.removeChild(tr);//表格调用删除方法删除行子元素
        }
</script>
</html>